iT邦幫忙

2022 iThome 鐵人賽

DAY 14
1
Modern Web

【每天5分鐘】學前端系列 第 14

Day14【每天5分鐘】學前端 | JavaScript 字串 string

  • 分享至 

  • xImage
  •  

今天介紹字串,會使用到 console.log ,還會教學怎麼開啟主控台。
console.log( ) 是前端人員查資訊除錯的好幫手,
( ) 裡面可以放入字串、數字、物件等。將一個一個依序介紹~

字串 String

雙引號 " "單引號 ' ' 包起來皆可,看個人喜好。
本文舉例會盡量使用雙引號,以避免單引號 ' 跟反引號 ` 長得像易混淆。
單引號 ' 和反引號 ` 在程式碼中分別代表不同的意思(例如在 jQuery)。

註:反引號在鍵盤左上角,有波浪符號的那個鍵(在數字 1 的左邊)

附上 MDN 字串介紹的連結 網址點我、W3School 連結 網址點我


我們都來實驗看看

以 HTML 檔引入 JS 為例:

<body>
    <script>
        console.log("Hello");
        console.log('World');
    </script>
</body>

console.log 裡面的東西是給開發者打印看資訊用的,並不會顯示在網頁上。
那要在哪裡找到他呢?

開啟開發者工具

Tips: 滑鼠右鍵 -> 檢查 或 鍵盤按 F12

選擇主控台

就會看到 雙引號 " "單引號 ' ' 裡面的字串了。
https://ithelp.ithome.com.tw/upload/images/20220915/20151346qQUes1jAGs.png

輸入反引號 ` ` 也可以顯示,但通常不會這樣用(它有其他用途)

console.log(`OK`);

https://ithelp.ithome.com.tw/upload/images/20220915/20151346PUI3DmnfHL.png

反引號 ` ` 能夠直接顯示 多行內容 。雙引號和單引號則不行

我們在主控台直接測試

在 > 的右邊用滑鼠點一下,即可輸入內容,輸入完畢按 enter 鍵。
https://ithelp.ithome.com.tw/upload/images/20220915/20151346Usjmd4ASdZ.png

以下為錯誤範例

https://ithelp.ithome.com.tw/upload/images/20220915/20151346R7zNYCqCdr.png
雙引號和單引號只要 斷行 就報錯了,出現紅色的叉叉,還有警告標語:
Uncaught SyntaxError: Invalid or unexpected token


清除主控台

如果覺得主控台的東西累積得太多,
只要按 清除主控台 那個 禁止 的符號(在 top 的左邊)
就能夠清除資料。
/images/emoticon/emoticon07.gif /images/emoticon/emoticon07.gif


顯示引號

不同的引號 包在引號的外面,可以直接顯示被包住的引號內容
https://ithelp.ithome.com.tw/upload/images/20220915/20151346RppRVo1Nkt.png

或使用 反斜線 \ 放在引號的前面也可以。


字串連接 使用加號 +

例如:

console.log("Ms."+"Zoe");

https://ithelp.ithome.com.tw/upload/images/20220915/20151346X0gAt59V8Q.png


如果個別字串忘記用引號包起來,加號也會出現。

console.log("Ms.+Zoe");

https://ithelp.ithome.com.tw/upload/images/20220915/20151346xg5RogBFyW.png

看出來差別了嗎? 要注意喔!


使用引號的字串相加,中間忘記使用加號,則會報錯。

console.log("Ms.""Zoe"); // 警告!此為錯誤案例!

https://ithelp.ithome.com.tw/upload/images/20220915/201513466AYedl3XG2.png


https://ithelp.ithome.com.tw/upload/images/20220915/201513469H5evn0MYc.png 小提醒:

同一字串的雙引號和單引號 不能混合使用 ,否則會報錯。
雙引號開頭需雙引號結尾,以此類推

https://ithelp.ithome.com.tw/upload/images/20220915/201513464fjK7SXsBf.png 小測驗:

console.log("企鵝說:"+'"我喜歡吃飯+睡覺 還有...打東東"');

主控台會出現什麼呢?



感謝閱讀,我們明天見囉~~~ /images/emoticon/emoticon29.gif


上一篇
Day13【每天5分鐘】學前端 | JavaScript 簡介
下一篇
Day15【每天5分鐘】學前端 | JavaScript 數字 number
系列文
【每天5分鐘】學前端30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

1
overcast3579
iT邦新手 5 級 ‧ 2022-09-15 17:46:04

overcast3579說:‘’我喜歡吃飯+睡覺 還有…妳‘’

Olivia iT邦新手 4 級 ‧ 2022-09-15 17:56:24 檢舉

完美改編~ 100 分 ♥ /images/emoticon/emoticon24.gif

0
json_liang
iT邦研究生 4 級 ‧ 2022-09-15 19:40:24

console.log("明天見");

Olivia iT邦新手 4 級 ‧ 2022-09-15 19:59:26 檢舉

/images/emoticon/emoticon12.gif 明天見~YA

我要留言

立即登入留言